<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .select{

            display: none;
        }
        .select1{
            display: block;
        }
    </style>
</head>
<body>
<select class="select1">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>
<select class="select">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>
<select class="select">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>
<select class="select">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>
<select class="select">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>
<select class="select">
<option>湖北</option>
<option>河南</option>
<option>湖西</option>
<option>湖东</option>
<option>湖中</option>
</select>



    <script>
/* var sel = document.querySelectorAll("select");
var [a, ...b ] = sel;
 */
var a1 = document.querySelector('.select1')
var a2 = document.querySelectorAll(".select1 > option")

 var a3 =document.querySelectorAll(".select")

 for (var i = 0; i < a2.length; i++) {
  
      a2[i].dataset.index = i
      a2[i].onclick = handler
    }


    function handler() {

      var index = this.dataset.index - 0;
      a3[index].style.display='block'

         



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省城联动</title>
</head>

<body>
    <select name="" id="province"></select>
    <select name="" id="cities"></select>
    <script>
        let province = ["四川", "广东", "湖南"];
        let cities = [
            ["成都", "德阳", "绵阳", "眉山"],
            ["广州", "东莞", "深圳"],
            ["长沙", "浏阳", "岳阳"]
        ];
        let provinceList = document.getElementById("province");
        let cityList = document.getElementById("cities");

        //封装
        function add(arr, select) {
            for (let i = 0; i < arr.length; i++) {
                select.add(new Option(arr[i], i));
            }
        }
        //添加默认省份       
        add(province, provinceList);

        //添加默认城市
        add(cities[provinceList.value], cityList);
        provinceList.onchange = function () {
            //获取cities的下标所对应的值
            // console.log(cities[this.value]);
            //添加一次就要把前面的清空一次
            cityList.options.length = 0;
            add(cities[this.value], cityList);
        }


    </script>
</body>

</html>
 -->
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省城联动</title>
</head>

<body>
    <select name="" id="province"></select>
    <select name="" id="cities"></select>
    <script>
        let province = ["四川", "广东", "湖南"];
        let cities = [
            ["成都", "德阳", "绵阳", "眉山"],
            ["广州", "东莞", "深圳"],
            ["长沙", "浏阳", "岳阳"]
        ];
        let provinceList = document.getElementById("province");
        let cityList = document.getElementById("cities");
  function add(arr, select) {
            for (let i = 0; i < arr.length; i++) {
                select.add(new Option(arr[i], i));
            }
        }         
        add(province, provinceList);
        add(cities[provinceList.value], cityList);
        provinceList.onchange = function () {
            cityList.options.length = 0;
            add(cities[this.value], cityList);
        }
    </script>
</body>

</html>








      
  










    </script>
</body>
</html>